import React from 'react';
import styled from 'styled-components'
import './index.css'
/**
 * 
 * 1. 排版：
 * 2. props: {  }
 * 3. 事件： 
 *    关闭弹出框的事件
 *    确定
 *    取消
 * 
 * 
 */

// const Container = styled.div`
//   width: 100vw;
//   height: 100vh;
//  .show {
//    display: block;   
//  }
//  .hide {
//    display: none;
//  }
// `

const DialogWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   position:fixed;
   left:0;
   top:0;
   display:flex;
   justify-content:center;
   align-items:center;
   .mask {
    width: 100%;
    height: 100%;
    background:#000;
    opacity: 0.6;
    position:absolute;
    left: 0;
    top:0;
   }
   .tip {
     min-width: calc(100vw - 20%); 
     max-width: calc(100vw - 10%);
     height: calc(100vh - 40%);
     background: #fff;
     z-index: 10; 
     /*  
      定位会产生 脱离文档流的效果
      弹性盒子，自带一个z轴属性，有层级效果，所以z-index会生效
     */

     /* position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -50%;
     margin-top: -50%;
     transform: translate(-50%, -50%); */
   }
`

interface IProps {
  closeClick?(flag: boolean): void;
  visiable: boolean
}

const Dialog: React.FC<IProps> = (props) => {
  const { closeClick, visiable } = props;
  // 接收父组件传进来的事件，
  const myClick = () => {
    console.log("my-click-close")
    closeClick && closeClick(false)
  }
  return (<DialogWrapper className={visiable ? 'dialog show' : 'dialog hide'}>
    <div className='mask' onClick={myClick}></div>
    <div className='tip' onClick={myClick}></div>
  </DialogWrapper>
  )
}

export default Dialog;